{% extends "finance/financial_module.html" %}
{# Excel导入记录页 #}
{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 37px;
        }

        th {
            text-align: center;
        }

        #yiban_table tr:hover {
            background: #cfcfcf;
        }

        #daiban_table tr:hover {
            background: #cfcfcf;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        tbody td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .model_li {
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .search {
            width: 30%;
            display: flex;
            float: right;
            margin: 5.5px 0;
            margin-right: 0.5%;
            /*border: 1px solid red;*/
        }

        .search input {
            vertical-align: middle;
            float: left;
        / / 左浮动 flex: 4;
            height: 29px;
            width: 77%;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
        / / 盒子模型，怪异IE盒子模型，width = content + border * 2 + padding * 2 padding-left: 10 px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 29px;
            line-height: 29px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
        }

        .div_clase {
            display: inline-block;
            width: 300px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #0b0b0b;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div class="headline">
        <div class="tab_top">上传记录</div>
    </div>
    <div>
        <div id="new_models" style="width: 80%;height: 80%;position: absolute;display: none;">
            <div id="box" style="width: 700px;height: 500px;background: white;z-index: 10100;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #cfcfcf solid 1px;">
                <div style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h5 id="model_title" class="modal-title" style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;"></h5>
                    <button id="close-model" type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="margin-right: 3%;line-height: 50px;">
                        <span onclick="close_models()" aria-hidden="true" style="font-size: 28px;"><i class="iconfont icon-quchu"></i></span>
                    </button>
                </div>
                <hr>
                <div style="width: 100%;">
                    <div style="width: 90%;height: 40px;line-height: 40px;margin-left: 5%;background-color: #F5F5F5;color: #1E90FF;padding-left: 1%;border: #cccccc solid 1px;border-top: none;border-bottom: none;padding-right: 1%;">
                        上传附件<span style="color: red;">(注: 议题附件、汇报PPT)</span>
                        <a href="javascript:;" class="file" style="vertical-align: top;margin-top: 5px;float: right;">
                            上传文件
                            <input type="file" name="party_main_body" id="party_main_body" onchange="upload_accessory('salary_excel', 'party_main', 'party_main_body')">
                        </a>
                    </div>
                    <table style="width: 90%;margin-left: 5%;">
                        <thead>
                        <tr>
                            <td style="width: 5%;border: #cccccc solid 1px;text-align: center;">序号</td>
                            <td style="width: 20%;border: #cccccc solid 1px;border-left: none;text-align: center;">文件名称</td>
                            <td style="width: 20%;border: #cccccc solid 1px;border-left: none;text-align: center;">文件大小</td>
                            <td style="width: 20%;border: #cccccc solid 1px;border-left: none;text-align: center;">上传时间</td>
                            <td style="width: 20%;border: #cccccc solid 1px;border-left: none;text-align: center;">上传人员</td>
                            <td style="width: 15%;border: #cccccc solid 1px;border-left: none;text-align: center;">操作</td>
                        </tr>
                        </thead>
                        <tbody style="overflow: auto;" id="party_main"></tbody>
                    </table>
                </div>
                <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                    <button id="model-affirm" style="width: 100px;height: 36px;border: #dfdfdf solid 1px;margin-top: 7px;border-radius: 3px;">确认</button>
                </div>
            </div>
        </div>
    </div>
    <div class="right-box" style="width: 100%;height: 95.1%;margin-top: 0;">
        <div style="height: 93%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
            <table id="clsy_table" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0"
                   cellpadding="2" width="100%" border="1">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>上传人</th>
                    <th>附件名字</th>
                    <th>上传时间</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table1">
                {% for obj in objs %}
                    <tr style="text-align: center">
                        <td style="width: 10%;">{{ forloop.counter }}</td>
                        <td style="width: 15%;">{{ obj.uploader_user.real_name }}</td>
                        <td style="width: 25%;">{{ obj.file_name }}</td>
                        <td style="width: 15%;">{{ obj.create_time | date:'Y-m-d H:i' }}</td>
                        <td style="width: 35%;">{{ obj.note }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                <div style="margin-top: 10%;">
                    <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                    <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                </div>
            </div>
        </div>
        <nav style="background: none;padding-top: 0.5%;" aria-label="Page navigation example">
            <div style="display: inline-block;margin-left: 2%;">
                <ul class="pagination">
                    <li class="page-item "><a class="page-link"
                                              style="width: 40px;height: 30px;line-height: 30px;text-align: center;border-top-left-radius: 4px;border-bottom-left-radius: 4px;"
                                              href="./import_salary_record_list_view?page=1&search_value={{ search_value }}"
                                              rel="external nofollow" rel="external nofollow">首页</a></li>
                    {% if objs.has_previous %}
                        <li class="page-item"><a class="page-link"
                                                 style="width: 60px;height: 30px;line-height: 30px;text-align: center;"
                                                 href="./import_salary_record_list_view?page={{ objs.previous_page_number }}&search_value={{ search_value }}"
                                                 rel="external nofollow" rel="external nofollow">上一页</a></li>
                    {% else %}
                        <li class="page-item disabled"><a class="page-link"
                                                          style="width: 60px;height: 30px;line-height: 30px;text-align: center;"
                                                          href="#" rel="external nofollow" rel="external nofollow"
                                                          rel="external nofollow" rel="external nofollow">上一页</a></li>
                    {% endif %}

                    {% for item in page_range %}
                        {% if item == currentPage %}
                            <li class="page-item active"><a class="page-link"
                                                            style="width: 40px;height: 30px;line-height: 30px;text-align: center;"
                                                            href="./import_salary_record_list_view?page={{ item }}&search_value={{ search_value }}"
                                                            rel="external nofollow" rel="external nofollow"
                                                            rel="external nofollow" rel="external nofollow"
                                                            rel="external nofollow" rel="external nofollow"
                                                            rel="external nofollow"
                                                            rel="external nofollow">{{ item }}</a></li>
                        {% else %}
                            <li class="page-item"><a class="page-link"
                                                     style="width: 40px;height: 30px;line-height: 30px;text-align: center;"
                                                     href="./import_salary_record_list_view?page={{ item }}&search_value={{ search_value }}"
                                                     rel="external nofollow" rel="external nofollow"
                                                     rel="external nofollow" rel="external nofollow"
                                                     rel="external nofollow" rel="external nofollow"
                                                     rel="external nofollow" rel="external nofollow">{{ item }}</a></li>
                        {% endif %}
                    {% endfor %}

                    {% if objs.has_next %}
                        <li class="page-item"><a class="page-link"
                                                 style="width: 60px;height: 30px;line-height: 30px;text-align: center;"
                                                 href="./import_salary_record_list_view?page={{ objs.next_page_number }}&search_value={{ search_value }}"
                                                 rel="external nofollow" rel="external nofollow">下一页</a></li>
                    {% else %}
                        <li class="page-item disabled"><a class="page-link"
                                                          style="width: 60px;height: 30px;line-height: 30px;text-align: center;"
                                                          href="#" rel="external nofollow" rel="external nofollow"
                                                          rel="external nofollow" rel="external nofollow">下一页</a></li>
                    {% endif %}
                    <li class="page-item" style="border-left: none;"><a class="page-link"
                                                                        style="width: 40px;height: 30px;line-height: 30px;text-align: center;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"
                                                                        href="./import_salary_record_list_view?page={{ paginator.num_pages }}&search_value={{ search_value }}"
                                                                        rel="external nofollow" rel="external nofollow">尾页</a>
                    </li>
                </ul>
            </div>
            <div style="display: inline-block;margin-left: 1%;">共 {{ paginator.count }} 条数据</div>
        </nav>
    </div>
{% endblock %}
{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("finance").className = "add-nav-active";
            document.getElementById("Excel-record").className = "add_class";
        };

        // 上传正文
        function upload_accessory(file_type, accessory_type) {
            document.getElementById("loading").style.display = "inline-block";
            var form = new FormData();
            var files = document.getElementById(accessory_type).files[0];
            form.append(file_type, files);
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/finance/import_salary_record_view", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        window.location.href = "/finance/salary_record_list_view"
                        if (JsonDate["code"] === 400) {
                            alert("请上传xlsx格式文件！")
                        }
                        document.getElementById("party_main_body").value = "";
                    }
                }
            };
        }
    </script>
{% endblock %}